 <template>
  <div>
    <div class="info-wrapper">
      <div class="title">今日订单</div>
      <div class="nums-box flex justify-between align-center">
        <div class="nums-left">
          <div class="item solid-right">
            <span class="num">1600</span>
            <p class="txt">预计单量</p>
          </div>
          <div class="item">
            <span class="num">1000</span>
            <p class="txt">完成单量</p>
          </div>
        </div>
        <div class="percent">
          78<i>%</i>  
        </div>
      </div>
      <van-progress :percentage="50" color="#00C188" :show-pivot="false"/>
    </div>
    <div class="chart-wrapper">
      <div class="actions">
        <div class="title">全国订单</div>
      </div>
      <canvas id="mountNode" style="width:100%;height:300px"></canvas>
    </div>
  </div>
</template>
<script>
import F2 from '@antv/f2'
export default {
  data() {
    return {
      show: false
    };
  },
  mounted () {
    this.renderChart()
  },
  methods: {
    renderChart () {
      var data = [{
        country: '预计单量',
        year: '1750',
        value: 1502
      }, {
        country: '预计单量',
        year: '1800',
        value: 1635
      }, {
        country: '预计单量',
        year: '1850',
        value: 1809
      }, {
        country: '预计单量',
        year: '1900',
        value: 5268
      }, {
        country: '预计单量',
        year: '1950',
        value: 2400
      }, {
        country: '预计单量',
        year: '1999',
        value: 3634
      }, {
        country: '预计单量',
        year: '2050',
        value: 1947
      }, {
        country: '实际单量',
        year: '1750',
        value: 1106
      }, {
        country: '实际单量',
        year: '1800',
        value: 1107
      }, {
        country: '实际单量',
        year: '1850',
        value: 1011
      }, {
        country: '实际单量',
        year: '1900',
        value: 1266
      }, {
        country: '实际单量',
        year: '1950',
        value: 1221
      }, {
        country: '实际单量',
        year: '1999',
        value: 767
      }, {
        country: '实际单量',
        year: '2050',
        value: 1330
      }];
      var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio
      });
      chart.source(data, {
        year: {
          range: [0, 1]
        }
      });
      
      chart.area().position('year*value').color('country').adjust('stack');
      chart.line().position('year*value').color('country').size(2).shape('country', function(country) {
        if (country === '实际单量') {
          return 'line';
        }
        if (country === '预计单量') {
          return 'dash';
        }
      }).adjust('stack');
      chart.point().position('year*value').color('country').adjust('stack');
      chart.render();
    }
  }
};
</script>
<style lang="less" scoped>
.chart-wrapper{
  padding-top: 50px;
  .actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    margin-bottom: 20px;
    .title{
      font-size:34px;
      color: #8F979E;
    }
  }
}
.info-wrapper{
  padding: 34px 40px 30px 40px;
  border-bottom: 8px solid #E5E5E5;
  .title{
    font-size:34px;
    font-weight:500;
    color:#8F979E;
  }
  .nums-box{
    margin-top: 40px;
    margin-bottom: 10px;
    .nums-left{
      margin-left: -17px;
      .item{
        display: inline-block;
        padding:0 27px;
      }
      .num{
        color: #0F0F0F;
        font-size:50px;
        font-weight:bold;
      }
      .txt{
        font-size:24px;
        font-weight:400;
        color:#606060;
        line-height:33px;
      }
    }
    .percent{
      font-size:100px;
      font-family:DINAlternate;
      font-weight:bold;
      color: #00C188;
      i{
        font-size:60px;
      }
    }
  }
}
</style>


